import React, {
  useState,
  //  useEffect 
} from 'react'
import {
  Space,
  Card
} from 'antd'
import OneCard from '../OneCard'

function OneList ({ pageItem, pageIndex, maxHeight }) {
  const [pageItemData, setPageItemData] = useState(pageItem)

  function getOneListInner (pageItem) {
    return pageItem.list.map((item, index, arr) => {
      const len = arr.length - 1
      const isLast = len === index
      let spaceNavi = null
      if (!isLast) {
        spaceNavi = <div style={{ height: "10px" }}></div>
      }
      function folderOnClick (index) {
        console.info('folderOnClick index', index)
        console.info('folderOnClick pageItem', pageItem)
        console.info('pageItem.childrenIndex', pageItem.childrenIndex)
        if (pageItem.childrenIndex === index) {
          pageItem.childrenIndex = undefined
        } else {
          pageItem.childrenIndex = index
        }
        console.info('folderOnClick pageItem2 ', pageItem)

        console.info('pageItem.childrenIndex2', pageItem.childrenIndex)
        pageItem.list[index].children[0].childrenIndex = undefined
        pageItem.list[index].children[0].folderOnClick = true
        console.info('pageItemData', pageItemData)
        setPageItemData({ ...pageItemData })
        // setPageItemData({ ...pageItem })
      }

      let badgeBool = false
      if (pageItem.childrenIndex !== undefined && pageItem.childrenIndex === index) {
        badgeBool = true
      }

      return (
        <div key={index}>
          <OneCard linkData={item} badgeBool={badgeBool} index={index} folderOnClick={folderOnClick}></OneCard>
          {spaceNavi}
        </div>
      )
    })
  }

  function getOneList (linkListInner, pageItem, pageIndex) {
    console.info('linkListInner', linkListInner)
    console.info('pageItem', pageItem)
    console.info('pageIndex', pageIndex)
    return (
      <Card size="small" key={pageIndex} title={pageItem.title}
        className={pageItem.folderOnClick ? 'folderOnClickClass' : ''}
        bodyStyle={{
          paddingTop: "4px",
          maxHeight: maxHeight,
          overflowY: "auto",
        }}
        style={cardStyle}>

        {linkListInner}
      </Card>
    )
  }

  function getChildrenNode (rootList, childrenIndex) {
    const t = rootList.filter((item, oIndex) => { return oIndex === childrenIndex })
    const ret = t[0].children
    return ret[0]
  }

  function getPageList (pageItem) {
    const linkListInner = getOneListInner(pageItem)
    console.info('pageItem 11 pageItem', pageItem)
    let linkList = [getOneList(linkListInner, pageItem, pageIndex)]

    // childrenIndex
    // 递归的时候 pageItem 在上面的赋值，下面没有继承过来，导致 第3级目录没有显示出来
    if (pageItem.childrenIndex !== undefined) {
      const childrenRoot = getChildrenNode(pageItem.list, pageItem.childrenIndex)
      linkList.push(getPageList(childrenRoot))
    }
    return linkList
  }

  const pageList = getPageList(pageItemData)

  return (
    <Space align="start">
      {pageList}
    </Space>
  )
}

export default OneList

const cardStyle = {
  width: 272,
  backgroundColor: "#e3e3e3",
}